<template>
  <div class="login_container">
    <el-row>
      <el-col :span="10" :offset="7">
        <el-form
          class="login_form"
          :model="loginForm"
          :rules="rules"
          ref="loginRef">
          <h1>用户登录</h1>
          <h2>WELCOME TO JCKJ<sup> &copy;</sup></h2>
          <el-form-item class="ipt" prop="username">
            <el-input
              size="large"
              :prefix-icon="User"
              v-model="loginForm.username"
              clearable></el-input>
          </el-form-item>
          <el-form-item class="ipt" prop="password">
            <el-input
              size="large"
              type="password"
              :prefix-icon="Lock"
              v-model="loginForm.password"
              show-password></el-input>
          </el-form-item>
          <el-button
            size="large"
            :loading="loading"
            type="primary"
            side="default"
            @click="submitFn(loginRef as FormInstance)"
            class="login_btn"
            >登录</el-button
          >
        </el-form>
      </el-col>
    </el-row>
  </div>
</template>

<script setup lang="ts" name="login">
  import { reactive, ref } from "vue";
  import { ElMessage, FormInstance } from "element-plus";
  import { useRouter, useRoute } from "vue-router";
  import { User, Lock } from "@element-plus/icons-vue";
  import { storeToRefs } from "pinia";

  import useAuthStore from "@/store/modules/auth.ts";
  import { ILoginParmas } from "@/apis/auth/type";

  const $store = useAuthStore();
  const $router = useRouter();
  const $route = useRoute();

  const loginRef = ref<FormInstance>();
  const { loading } = storeToRefs($store);
  const loginForm = reactive<ILoginParmas>({
    username: "mhyhxy",
    password: "Mhy751103",
  });

  /**
   * 表单校验
   */
  const rules = {
    username: [
      {
        required: true,
        message: "用户名不能为空！",
        trigger: ["change", "blur"],
      },
      {
        pattern: /^\w{5,10}$/,
        message: "用户名必须满足5~10英文字母或数字！",
        trigger: "blur",
      },
    ],
    password: [
      {
        required: true,
        message: "密码不能为空！",
        trigger: ["change", "blur"],
      },
      {
        pattern: /^(?=[^0])(?=.*\d)(?=.*[a-z])(?=.*[A-Z])[0-9A-Za-z]{6,20}$/,
        message:
          "密码必须满足大小英文字母+数字组合方式,总长度6~20位,并且0不在首位!",
        trigger: "blur",
      },
    ],
  };

  //提交登录按钮
  const submitFn = async (formRef: FormInstance) => {
    //1.表单验证
    if (!formRef) return;
    await formRef.validate(valid => {
      if (!valid) {
        ElMessage.error("请按照要求填写表单！");
        return;
      }
    });
    //2.发送登录请求
    const res = await $store.userLogin(loginForm);
    //3.根据响应结果处理后续操作
    if (res) {
      // await $store.getPermissionIds();
      let redirect = $route.query.redirect as string;
      $router.push(redirect || "/");
    }
  };
</script>

<style scoped lang="scss">
  .login_container {
    margin-top: 100px;
    .login_form {
      position: relative;
      width: 80%;
      top: 30px;
      border-radius: 10px;
      box-shadow: 0 0 10px;
      padding: 40px;
      h1 {
        color: #333;
        font-size: 30px;
        height: 30px;
        line-height: 40px;
        font-weight: 600;
        text-align: center;
        margin: 0;
      }
      h2 {
        font-size: 20px;
        color: #555;
        margin: 30px;
        text-align: right;
      }
      .login_btn {
        margin-top: 30px;
        margin-left: 30%;
        width: 50%;
      }
      .ipt {
        margin-left: 50px;
        margin-right: 30px;
      }
    }
  }
</style>
